<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自由落体多个小球</title>
		<style type="text/css">
		body{

		}
			canvas{border: 1px solid;
			    width: 1000px;
			    height: 500px;
			    					/*	    background-image: url(../img/星空1.jpg);*/
			   }
			
		</style>
	</head>
	<body>
		<canvas width="1000px" height="500px" id="main">
			<script type="text/javascript">
				var canvas=document.getElementById("main");
				var ctx=canvas.getContext("2d");//定义画笔
					ctx.fillStyle="rgba(255,255,255,0)"//填充矩形颜色
				var  x=50;//定义球x轴坐标，圆心
				var  y=50;
				var r=50;
				var arcArr=[
//				   [20,200,20,4,0,"green"],
//				   [20,110,20,5,1,"red"],
//				   [20,100,20,2,0,"blue"]
				];
				setInterval(function(){//时间间隔
					for(var i=0;i<80;i++){//一次出球的数量
						var vx=parseInt(Math.random()*5)+1;//x轴受力的大小不同
					if(Math.random()>0.5){
						vx=-vx;
					}
					var vy=parseInt(Math.random()*10)+20;
					var r=parseInt(Math.random()*256);
					var g=parseInt(Math.random()*256);
					var b=parseInt(Math.random()*256);
					arcArr.push([500,400,5,vx,-vy,"rgb("+r+","+g+","+b+")"]);
					}
					
				
				},1500);
				
//				   setInterval(function(){
//				   	arcArr.push([20,50,10,3,2,"white"])
//				   },500)
					setInterval(function(){
				
					
//					ctx.fillStyle="rgba(255,255,0,0.1)";
					ctx.fillRect(0,0,1000,500);
					
					
					for( var i=0;i<arcArr.length;i++){
					var arcx=arcArr[i][0]
					var arcy=arcArr[i][1]
					var arcr=arcArr[i][2]
					var arcvx=arcArr[i][3]
					var arcvy=arcArr[i][4]
					var arccc=arcArr[i][5]
					ctx.beginPath();
					ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
					ctx.fillStyle=arcArr[i][5];
					ctx.fill();
					arcArr[i][0]=arcArr[i][0]+arcArr[i][3];
					arcArr[i][1]=arcArr[i][1]+arcArr[i][4];
					arcArr[i][4]=arcArr[i][4]+1.2;
//					if(arcArr[i][1]>=500-arcArr[i][2]){
//						arcArr[i][4]=-arcArr[i][4];
//						arcArr[i][4]=arcArr[i][4]*0.7;
//						arcArr[i][1]=500-arcArr[i][2];
//					}
//					if(arcArr[i][0]>=1000-arcArr[i][2]){
//						arcArr[i][3]=-arcArr[i][3];
//						arcArr[i][0]=1000-arcArr[i][2];
//						
//					}
//					if(arcArr[i][0]<arcArr[i][2]){
//						arcArr[i][3]=-arcArr[i][3];
//						arcArr[i][0]=arcArr[i][2];
//						
//					}
					
					}
					
					},16)
					
			</script>
//				
					
				
		</canvas>
		    
	</body>
</html>

